const center = [104.1324, 36.92669]
var map = null
var mapDom = document.getElementById('map')
const baseUrl = "http://localhost:63342/code/mapboxgl-lecture/data/"
const style = {
    glyphs: baseUrl + "fonts/mapbox/{fontstack}/{range}.pbf",
    name: "my-style",
    sources: {
        'china-tile': {
            "type": "vector",
            "scheme": "tms",
            "tiles": [
                "http://localhost:8081/geoserver/gwc/service/tms/1.0.0/mapbox%3Achina@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
            ]
        }
    },
    layers: [
        {
            id: 'background',
            type: 'background',
            paint: {
                'background-color': '#f00',
                'background-opacity': 0.1
            }
        },
        {
            id: 'boundry',
            type: 'line',
            source: 'china-tile',
            'source-layer': 'boundry',
            'maxzoom': 3.2,
            paint: {
                'line-color': '#efefef',
                'line-width': 2
            }
        },
        {
            id: 'province',
            type: 'line',
            source: 'china-tile',
            'source-layer': 'province',
            'minzoom': 3.3,
            paint: {
                'line-color': '#b3eee4',
                'line-width': 2
            }
        },
        {
            id: 'capital',
            type: 'symbol',
            source: 'china-tile',
            'source-layer': 'capital',
            'maxzoom': 6,
            'filter': ['!=', 'name', '北京'],
            layout: {
                'icon-allow-overlap': true,
                'text-allow-overlap': true,
                'icon-image': 'city',
                'icon-size': 0.35,
                'text-field': ['get', 'name'],
                'text-anchor': 'bottom',
                'text-offset': [0, 1.8],
                'text-size': 12
            },
            paint: {
                'text-color': '#000'
            }
        },
        {
            id: 'capital-bj',
            type: 'symbol',
            source: 'china-tile',
            'source-layer': 'capital',
            'filter': ['==', 'name', '北京'],
            layout: {
                'icon-allow-overlap': true,
                'text-allow-overlap': true,
                'icon-image': 'red-star',
                'icon-size': 0.7,
                'text-field': ['get', 'name'],
                'text-anchor': 'bottom',
                'text-offset': [0, 2],
                'text-size': 14
            },
            paint: {
                'text-color': '#f00'
            }
        },
        {
            id: 'city',
            type: 'symbol',
            source: 'china-tile',
            'source-layer': 'city',
            'minzoom': 6,
            'maxzoom': 8,
            'filter': ['!=', 'name', '北京市'],
            layout: {
                'icon-allow-overlap': true,
                'text-allow-overlap': true,
                'icon-image': 'city',
                'icon-size': 0.3,
                'text-field': ['get', 'name'],
                'text-anchor': 'bottom',
                'text-offset': [0, 2],
                'text-size': 10
            },
            paint: {
                'text-color': '#000'
            }
        },
        {
            id: 'lake',
            type: 'fill',
            source: 'china-tile',
            'source-layer': 'lake',
            paint: {
                'fill-color': '#70a5ec',
                'fill-opacity': 0.65
            }
        },
        {
            id: 'river',
            type: 'line',
            source: 'china-tile',
            'source-layer': 'river',
            'minzoom': 10,
            paint: {
                'line-color': '#70a5ec',
                'line-width': 2
            }
        }
    ],
    sprite: baseUrl,
    version: 8,
}
map = new mapboxgl.Map({
    container: mapDom, // container ID
    style: style, // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    hash: false,
    logoPosition: 'bottom-right'
});